<style scoped>
.wraper {
    padding: 0 30px;
}

.iconfont {
    font-size: 14px;
}

.wraper .headline {
    font-size: 12px;
    color: #68777c;
    font-weight: bold;
    margin: 19px 0 19px 5px;
    line-height: 14px;
}

.wraper .top .headline {
    margin: 0 0 18px 0;
}

.wraper .group .headline,
.wraper .breed .headline {
    border-top: 1px dashed #cccccc;
    padding-top: 19px;
}



/* crumb start */

.crumb {
    position: relative;
    height: 110px;
    background-color: #e4eaec;
    margin: 20px 30px;
}

.crumb p {
    font-size:12px;
    color:#58666e;
    padding-left:30px;
    line-height: 70px;
}
.crumb .group_name {
    position: absolute;
    bottom: 0px;
    left: 30px;
    height: 40px;
    width: 100px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
}


/* crumb end */


/* 顶部 start */

.wraper .top_card {
    height: 138px;
    text-align: center;
    width: 16.666%;
    padding-left: 7px;
}

.wraper .top_card:first-child {
    padding-left: 0;
}

.wraper .top_card>div {
    background-color: #f8f8f8;
    height: 100%;
}


.wraper .top_card .card_bar {
    width: 100%;
    height: 3px;
}

.wraper .top_card .item {
    font-size: 16px;
    color: #6a747f;
    padding-top: 20px;
    line-height: 40px;
}

.wraper .role .item {
    font-size: 12px;
    padding-top: 0px;
    line-height: 28px;
}

.wraper .top_card .result {
    font-size: 30px;
}



/* 顶部role模块 start */

.wraper .role_wraper {
    border-left: 4px solid #ff855f;
}

.wraper .role_wraper .ivu-row {
    padding-top: 28px;
}

.wraper .role_wraper .ivu-col {
    height: 82px;
}

.wraper .role_wraper .ivu-col.right {
    border-left: 1px solid #c8d2d5;
}

.wraper .role_wraper .ivu-col p {
    color: #4074e1;
}

.wraper .role_wraper .ivu-col.right p {
    color: #58666e;
}

.wraper .role_wraper .ivu-col .result {
    font-size: 35px;
}



/* 顶部role模块 end */


/* 顶部 end */


/* 分页 start */

.page {
    margin: 20px 0;
}
.breed .page {
    padding-bottom: 150px;
}
/* 分页 end */

.search{
    margin-bottom: 15px;
}

</style>


<style>
.group-detail .ivu-btn-text {
    color: #4074e1;
}

/* 自定义modal start */

/* .team .ivu-modal-body {
    padding: 0px;
    background-color: #fff;
}

.team .ivu-modal-content:after {
    content: '';
    display: block;
    clear: both;
}

.team .ivu-modal-content {
    zoom: 1;
    background-color: #cfeaf8;
}

.team .ivu-modal-body {
    float: left;
    width: 67%;
    padding: 10px;
}

.team .ivu-modal-footer {
    float: left;
    width: 33%;
    text-align: center;
    padding: 0 14px;
}

.team .check-info {
    margin-bottom: 10px;
}

.team .check-standard .info .title {
    width: 7.7%;
    height: 232px;
    background-color: #4074e1;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    padding-top: 48px;
}

.team .check-standard .promote-info.info .title {
    height: 425px;
    padding-top: 150px;
}

.team .check-standard .info .content {
    width: 92.3%;
}

.team .ivu-table-tbody {
    font-size: 12px;
}

.team .ivu-table-tbody td.condition {
    background-color: #f0f0f0;
    font-weight: bold;
    text-align: left;
    padding-left: 10px;
}

.team .ivu-table-header .condition {
    text-align: left;
    padding-left: 10px;
}

.team .ivu-table-header .ivu-table-column-center {
    background-color: #e4eaec;
    border-right: 1px solid #d6dfe2;
    border-bottom: 1px solid #d6dfe2;
}

.team .ivu-table-tbody .ivu-table-column-center {
    border-bottom: 1px solid #d6dfe2;
    border-bottom: 1px solid #d6dfe2;
}

.team .current-analyze {
    text-align: left;
    margin-bottom: 45px;
}

.team .current-analyze h5 {
    font-size: 16px;
    font-weight: bold;
    line-height: 60px;
}

.team .current-analyze .ivu-col-span-12 {
    background-color: #fff;
    height: 48px;
    line-height: 48px;
    padding-left: 20px;
    font-size: 12px;
}

.team .current-analyze .ivu-row {
    border-top: 1px solid #cfeaf8;
}

.team .current-analyze .ivu-row:first-child {
    border-top: none;
}

.team .current-analyze .ivu-col-span-12:first-child {
    border-right: 1px solid #cfeaf8;
    font-weight: bold;
}

.team .current-analyze .c1 {
    color: #ff855f;
}

.team .current-analyze .c2 {
    color: #08c111;
} */



/* 自定义modal end */
</style>

<template>
    <div class="group-detail">
        <div class="crumb">
            <p>当前位置： 我的团队>{{username}}组</p>
            <div class="group_name">{{username}}组</div>
        </div>
        <div class="wraper">
            <div class="top">
                <div class="headline">
                    <div class="item clearfix">
                        <i class="icon iconfont icon-fenxi fl"></i>
                        <div class="fl" style="padding-left:10px;">团附整体状况分析</div>
                    </div>
                </div>
                <div class="clearfix">
                    <div class="top_card manpower fl" v-for="(item,index) in teamstatus" :key="item.name">
                        <div>
                            <div class="card_bar" :style="'background-color:'+colors[index]"></div>
                            <p class="item">{{item.name}}</p>
                            <p class="result" :style="'color:'+colors[index]">{{item.value}}</p>
                        </div>
                    </div>
                    <!-- <div class="top_card persistency fl">
                        <div>
                            <div class="card_bar" style="background-color:#6aefe5"></div>
                            <p class="item">团队十三个月继续率</p>
                            <p class="result" style="color:#6aefe5">85%</p>
                        </div>
                    </div>
                    <div class="top_card commission fl">
                        <div>
                            <div class="card_bar" style="background-color:#ff855f"></div>
                            <p class="item">团队首年度佣金</p>
                            <p class="result" style="color:#ff855f">588159.00</p>
                        </div>
                    </div>
                    <div class="top_card credit fl">
                        <div>
                            <div class="card_bar" style="background-color:#00a8f7"></div>
                            <p class="item">个人信用值</p>
                            <p class="result" style="color:#00a8f7">100</p>
                        </div>
                    </div>
                    <div class="top_card cm_num fl">
                        <div>
                            <div class="card_bar" style="background-color:#f5bb07"></div>
                            <p class="item">所辖CM人数</p>
                            <p class="result" style="color:#f5bb07">{{groupTotal}}</p>
                        </div>
                    </div>
                    <div class="top_card cm_num2 fl">
                        <div>
                            <div class="card_bar" style="background-color:#adeda2"></div>
                            <p class="item">所辖CM人数</p>
                            <p class="result" style="color:#adeda2">{{groupTotal}}</p>
                        </div>
                    </div> -->
                </div>
            </div>
            <div class="group">
                <div class="headline">
                    <div class="item clearfix">
                        <i class="icon iconfont icon-tingliushijianfenxi fl"></i>
                        <div class="fl" style="padding-left:10px;">直辖组</div>
                    </div>
                </div>
                <div class="search">
                    <span>快速搜索</span>
                    <Input v-model="searchForm.job_num" placeholder="请输入代理人工号" style="width: 140px"></Input>
                    <Input v-model="searchForm.name" placeholder="请输入代理人姓名" style="width: 140px"></Input>
                    <DatePicker type="month" v-model="searchForm.datetime" format="yyyy-MM" placeholder="选择日期" style="width: 120px" @on-change="dateChange"></DatePicker>
                    <Button @click='search' type="primary">查询</Button>
                </div>
                <div class="clearfix">
                    <Table border :columns="columns_group" :data="data_group"></Table>
                    <Row class="page fr">
                        <Col span="24">
                        <Page :total="groupTotal" show-total show-sizer @on-change="groupPageChange" @on-page-size-change="groupPageSizeChange"></Page>
                        </Col>
                    </Row>
                </div>

            </div>
            <div class="breed">
                <div class="headline">
                    <div class="item clearfix">
                        <i class="icon iconfont icon-tingliushijianfenxi fl"></i>
                        <div class="fl" style="padding-left:10px;">直接育成</div>
                    </div>
                </div>
                <div class="search">
                    <span>快速搜索</span>
                    <Input v-model="searchForm1.job_num" placeholder="请输入代理人工号" style="width: 140px"></Input>
                    <Input v-model="searchForm1.name" placeholder="请输入代理人姓名" style="width: 140px"></Input>
                    <DatePicker type="month" v-model="searchForm1.datetime" format="yyyy-MM" placeholder="选择日期" style="width: 120px" @on-change="dateChange1"></DatePicker>
                    <Button @click='search1' type="primary">查询</Button>
                </div>
                <div class="clearfix">
                    <Table border :columns="columns_breed" :data="data_breed"></Table>
                    <Row class="page fr">
                        <Col span="24">
                        <Page :total="breedTotal" show-total show-sizer @on-change="breedPageChange" @on-page-size-change="breedPageSizeChange"></Page>
                        </Col>
                    </Row>
                </div>
            </div>
        </div>

        <Modal v-model="checkModal" class-name="team" title="晋升考核明细" width="1000">
            <div class="check-standard">
                <div class="check-info info clearfix">
                    <div class="title fl">
                        <div style='margin:auto 0;'>考<br>核<br>信<br>息</div>
                        </span>
                    </div>
                    <div class="content fl">
                        <Table border :columns="columms_check" :data="data_check"></Table>
                    </div>
                </div>
                <div class="promote-info info clearfix">
                    <div class="title fl">晋<br>升<br>信<br>息</div>
                    <div class="content fl">
                        <Table border :columns="columms_promote" :data="data_promote"></Table>
                    </div>
                </div>
            </div>
            <div slot="footer" class="check-result">
                <div class="current-analyze">
                    <h5>个人现状分析</h5>
                   <Row>
                        <Col span='12'>姓名</Col>
                        <Col span='12'>{{agentCurrent.name}}</Col>
                    </Row>
                    <Row>
                        <Col span='12'>工号</Col>
                        <Col span='12'>{{agentCurrent.agent_code}}</Col>
                    </Row>
                    <Row>
                        <Col span='12'>当前级别</Col>
                        <Col span='12' class-name="c1">{{agentCurrent.c_rank}}</Col>
                    </Row>
                    <Row>
                        <Col span='12'>下一级别</Col>
                        <Col span='12' class-name="c1">{{agentCurrent.n_rank}}</Col>
                    </Row>
                    <Row>
                        <Col span='12'>考核数据统计时间</Col>
                        <Col span='12'>2017-7--2018-6</Col>
                    </Row>
                    <Row>
                        <Col span='12'>晋升达标</Col>
                        <Col span='12' class-name="c2">已满足条件</Col>
                    </Row>
                </div>
            </div>
        </Modal>

    </div>
</template>

<script>
import productTitle from '../../components/productTitle';
import { getAgentCm,getAgentBreed,getAgentDetail} from '../../api/team';
import { getUnderling , getUnderlingBreed , getAchie} from '../../api/basiclaw'
import { formatTime } from '../../libs/time'
export default {
    data() {
        return {
            searchForm:{
                datetime:formatTime(new Date(),'yyyy-MM'),
                date:formatTime(new Date(),'yyyy-MM'),
                job_num:'',
                name:'',
                p:1,
                pagesize:10
            },
            searchForm1:{
                datetime:formatTime(new Date(),'yyyy-MM'),
                date:formatTime(new Date(),'yyyy-MM'),
                job_num:'',
                name:'',
                p:1,
                pagesize:10
            },
            columnstag:true,
            columnstag1:true,
            teamstatus:[],
            colors:[
                "#4074e1","#6aefe5","#00a8f7","#f5bb07","#adeda2"
            ],
            username:'',
            group_p:1,
            group_pagesize:10,
            breed_p:1,
            breed_pagesize:10,
            checkModal: false,
            groupTotal: 0,
            breedTotal: 0,
            agentCurrent:{
            },
            columns_group: [
                {
                    title: '工号',
                    key: 'job_num',
                    align: 'center',
                },
                {
                    title: '姓名',
                    key: 'name',
                    align: 'center',
                },
                {
                    title: '职级',
                    key: 'rank_name',
                    align: 'center',
                },                
            ],
            data_group: [
                
            ],
            columns_breed: [
                {
                    title: '工号',
                    key: 'job_num',
                    align: 'center',
                },
                {
                    title: '姓名',
                    key: 'name',
                    align: 'center',
                },
                {
                    title: '职级',
                    key: 'rank_name',
                    align: 'center',
                },
                // {
                //     title: '晋升/考核',
                //     key: 'check',
                //     align: 'center',
                //     width: 100,
                //     render: (h, params) => {
                //         return h('div', [
                //             h('Button', {
                //                 props: {
                //                     type: 'text',
                //                     size: 'small',
                //                     color: '#333333'
                //                 },
                //                 on: {
                //                     click: () => {
                //                        this.check(params.row.agent_code)
                //                     }
                //                 }
                //             }, '管理'),
                //         ]);
                //     }
                // },
                {
                    title: '所辖情况',
                    key: 'under',
                    align: 'center',
                    width: 100,
                    render: (h, params) => {
                        return h('div', [
                            h('a', {
                                attrs: {
                                    href: 'http://biz.kuaibao365.com/#/group_detail/'+params.row.uid,
                                    // href: 'http://localhost:8080/#/group_detail/'+params.row.agent_code,
                                    target:'_blank'
                                },
                            }, '查看'),
                        ]);
                    }
                },
            ],
            data_breed: [
                
            ],
            columms_check: [
                {
                    title: '维持考核条件',
                    key: 'condition',
                    align: 'center',
                    className: 'condition'
                },
                {
                    title: '基本法维持标准',
                    key: 'standard',
                    align: 'center',
                },
                {
                    title: '已完成',
                    key: 'done',
                    align: 'center',
                    width: 100,
                },
                {
                    title: '差额',
                    key: 'balance',
                    align: 'center',
                    width: 100,
                },
            ],
            data_check: [
                {
                    condition: '团队首年度佣金（TFYC）',
                    standard: '10000',
                    done: '10000 ',
                    balance: '10000',
                },
                {
                    condition: '团队十三个继续率（TR13）',
                    standard: '85%',
                    done: '85% ',
                    balance: '0',
                },
                {
                    condition: ' 团队效人力（EM）',
                    standard: '2',
                    done: '2 ',
                    balance: '2',
                },
                {
                    condition: '个人信用值(CV)',
                    standard: '100',
                    done: '100 ',
                    balance: '0',
                },
            ],
            columms_promote: [
                {
                    title: '维持考核条件',
                    key: 'condition',
                    align: 'center',
                    className: 'condition'
                },
                {
                    title: '基本法维持标准',
                    key: 'standard',
                    align: 'center',
                },
                {
                    title: '已完成',
                    key: 'done',
                    align: 'center',
                    width: 100,
                },
                {
                    title: '差额',
                    key: 'balance',
                    align: 'center',
                    width: 100,
                },
            ],
            data_promote: [
                {
                    condition: '个人首年度佣金（TFYC)',
                    standard: '10000',
                    done: '10000 ',
                    balance: '10000',
                },
                {
                    condition: ' 个人十三个继续率（TR13）',
                    standard: '10000',
                    done: '10000 ',
                    balance: '10000',
                },
                {
                    condition: ' 个人出勤率（AR）',
                    standard: '85%',
                    done: '85% ',
                    balance: '0',
                },
                {
                    condition: '个人信用值(CV)',
                    standard: '100',
                    done: '100 ',
                    balance: '0',
                },
                {
                    condition: '所辖CM人数 （CM）',
                    standard: '4',
                    done: '4 ',
                    balance: '0',
                },
                {
                    condition: '直接推荐CM人数（CM）',
                    standard: '2',
                    done: '2 ',
                    balance: '0',
                },
                {
                    condition: '团队月均有效力(MEM)',
                    standard: '3',
                    done: '3 ',
                    balance: '0',
                },
                {
                    condition: '团队首年度佣金（TFYC）',
                    standard: '20000',
                    done: '20000 ',
                    balance: '0',
                },
            ],

        }
    },
    components: {
        productTitle
    },
    created(){
        // this.getCm();
        // this.getBreed();
        // this.getInfo();
        this.getachie()
        this.getunderling()
        this.getunderlingbree()
    },
    methods: {
        dateChange(date){
            this.searchForm.date = date
        },
        dateChange1(date){
            this.searchForm1.date = date
        },
        search(){
            this.getunderling()
        },
        search1(){
            this.getunderlingbree()
        },
        getachie(){
            let _params = {
                uid: this.$route.params.id
            }
            new Promise((resolve, reject) => {
                getAchie(_params).then(response => {
                    //console.log(response.data)
                    if (response.data.err == 0) {                       
                        this.teamstatus = response.data.data
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        //获取直辖组
        getunderling(){
            let _id = this.$route.params.id
            this.searchForm.uid = _id
            new Promise((resolve, reject) => {
                getUnderling(this.searchForm).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {   
                        this.username = response.data.data.name              
                        this.data_group = response.data.data.list;
                        this.groupTotal = response.data.data.total;
                        if(response.data.data.total&&response.data.data.columns.length > 0&&this.columnstag1){
                            this.columns_group.splice(3,0,...response.data.data.columns)
                            this.columnstag1 = false
                        }
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        //获取直接育成
        getunderlingbree(){
            let _id = this.$route.params.id
            this.searchForm1.uid = _id
            new Promise((resolve, reject) => {
                getUnderlingBreed(this.searchForm1).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {                       
                        this.data_breed = response.data.data.list;
                        this.breedTotal = response.data.data.total;
                        if(response.data.data.total&&response.data.data.columns.length > 0&&this.columnstag){
                            this.columns_breed.splice(3,0,...response.data.data.columns)
                            this.columnstag = false
                        }
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        // 获取代理人直辖cm
        // getCm(){
        //     let _params = {
        //         agent_code:this.$route.params.id,
        //         p:this.group_p,
        //         pagesize:this.group_pagesize
        //     }
        //     new Promise((resolve, reject) => {
        //         getAgentCm(_params).then(response => {
        //             if (response.data.err == 0) {
        //                 this.data_group = response.data.data.list;
        //                 this.groupTotal = response.data.data.total;
        //             } else {
        //                 this.$Message.error(response.data.info);
        //             }
        //             resolve();
        //         }).catch(error => {
        //             reject(error);
        //         });
        //     });
        // },
        // 获取代理人育成
        // getBreed(){
        //     let _params = {
        //         agent_code:this.$route.params.id,
        //         p:this.breed_p,
        //         pagesize:this.group_pagesize
        //     }
        //     new Promise((resolve, reject) => {
        //         getAgentBreed(_params).then(response => {
        //             if (response.data.err == 0) {
        //                 this.data_breed = response.data.data.list;
        //                 this.breedTotal = response.data.data.total;
        //             } else {
        //                 this.$Message.error(response.data.info);
        //             }
        //             resolve();
        //         }).catch(error => {
        //             reject(error);
        //         });
        //     });
        // },


        groupPageChange(index) {
            this.searchForm.p=index;
            this.getunderling();
        },
        groupPageSizeChange(size) {
            this.searchForm.pagesize=size;
            this.getunderling();
        },
        breedPageChange(index) {
            this.searchForm1.p=index;
            this.getunderlingbree();
        },
        breedPageSizeChange(size) {
            this.searchForm1.pagesize=size;
            this.getunderlingbree();

        },

        // 获取代理人信息
        // getInfo(){
        //      let _params = {
        //         agent_code:this.$route.params.id
        //     }
        //     new Promise((resolve, reject) => {
        //         getAgentDetail(_params).then(response => {
        //             if (response.data.err == 0) {
        //                 this.agentInfo.name = response.data.data.name; 
        //             } else {
        //                 this.$Message.error(response.data.info);
        //             }
        //             resolve();
        //         }).catch(error => {
        //             reject(error);
        //         });
        //     });   
        // },

        // 点击管理，查看晋升考核明细
        check(value) {
            
            let _params = {
                agent_code:value
            }
            let rankList = ['JCM','SCM','UM','AD','JP','IP','SP','CP']
            let rankNameList =['初级客户经理','高级客户经理','营业部经理','营业区总监','初级合伙人','中级合伙人','高级合伙人','城市合伙人'];
            new Promise((resolve, reject) => {
                getAgentDetail(_params).then(response => {
                    if (response.data.err == 0) {
                        this.data_check[3].done = response.data.data.credit_value; //信用值
                        this.data_promote[2].done = response.data.data.ar+"%"; //考勤
                        this.data_promote[3].done = response.data.data.credit_value; //信用值
                        //现状
                        this.agentCurrent.name = response.data.data.name; 
                        this.agentCurrent.agent_code = response.data.data.agent_code; 
                        this.agentCurrent.c_rank = rankNameList[parseInt(response.data.data.rank)-1]+"("+rankList[parseInt(response.data.data.rank)-1]+")";//下一级别
                        this.agentCurrent.n_rank = rankNameList[response.data.data.rank]+"("+rankList[response.data.data.rank]+")";  //当前级别
                        this.checkModal = true; 
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        // 点击查看，跳转的该组的详情页
        examine(id){
            window.open.push({ name: 'group_detail', params: { id: id } })
        }
    }
}
</script>
